<template>
  <view class="progress-bar" :style="{ color: props.color[0], '--wh': props.reactWH + 'rpx' }">
      <canvas v-if="imgSrc == ''" canvas-id="mycanvas" />
	  <image  v-else  class="img" :style="{width: props.reactWH+'rpx',height:props.reactWH+'rpx'}" mode="aspectFit" :src="imgSrc" ></image>
       <text class="tit">{{ props.com }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance, watch, nextTick } from "vue";

//当前组件实例对象
const currentInstance = getCurrentInstance();
//获取 defineProps
const props: Record<string, any> = defineProps({
  // 视图的宽高
  reactWH: { type: Number, default: 120 },
  // 设置圆环的宽度
  LineWidth: { type: Number, default: 17 },
  //进度百分比
  percent: { type: Number, default: 0.8 },
  //内容
  com: { type: String, default: "--" },
  // 进度条颜色
  color: { type: Array, default: () => ["#35B1E5", "#BAFAF0"] },
});

watch(
  () => props.com,
  (newData) => {
    nextTick(() => {
      imgSrc.value = "";
      createProgress();
    });
  },
  { immediate: true, deep: true }
);

let imgSrc = ref("");
function createProgress() {
  // canvas视图的宽高(矩形->正方形)
  let reactWH = uni?.upx2px(props.reactWH);
  // 设置圆环的宽度
  let LineWidth = uni?.upx2px(props.LineWidth);
  //圆心的xY轴坐标
  let center = reactWH / 2;
  // 圆弧的半径
  let radius = (reactWH - LineWidth) / 2;
  //进度百分比
  let percent = props.percent;
  let ctx = reactive(uni.createCanvasContext("mycanvas", currentInstance));
  ctx.setLineWidth(LineWidth); // 设置圆环的宽度
  ctx.arc(center, center, radius, 0, 2 * Math.PI);
  ctx.setStrokeStyle("#fff");
  ctx.stroke(); //对当前路径进行描边
  ctx.beginPath(); //开始一个新的路径
  ctx.setStrokeStyle("#0079fe"); // 设置圆环的颜色
  const startAngle = -Math.PI / 2;
  const endAngle = startAngle - percent * 2 * Math.PI;

  const grd: any = ctx.createLinearGradient(0, 0, reactWH, 0);
  grd.addColorStop(0, props.color[0]);
  grd.addColorStop(0.5, props.color[0]);
  grd.addColorStop(1, props.color[1]);
  ctx.setStrokeStyle(grd);
  ctx.arc(center, center, radius, startAngle, endAngle, true);
  ctx.setLineCap("round");
  ctx.stroke(); //对当前路径进行描边
  ctx.draw(true, () => {
	   //不是WEB 的时候 把canvas替换成图片显示 处理小程序真机层级问题

	  uni.canvasToTempFilePath(
      {
        x: 0,
        y: 0,
        width: reactWH,
        height: reactWH,
        destWidth: reactWH,
        destHeight: reactWH,
        canvasId: "mycanvas",
        success: function (res) {
          imgSrc.value = res.tempFilePath;
        },
        fail: function (res) {
          console.log("图片地址失败", res);
        },
      },
      currentInstance
    );

  });
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
.progress-bar {
  position: relative;
  width: var(--wh);
  height:  var(--wh);
  line-height:  var(--wh);
  text-align: center;
  canvas {
    position: absolute;
    width: inherit;
    height: inherit;
    left: -999rpx;
  }
  .img {
    // @include absolute-box(tl);
	position: absolute;
	left: 0;
	top: 0;
  }
  .tit {
    font-weight: 800;
    font-size: 22rpx;
	vertical-align: top;
    color: var(--color);
  }
}
</style>
